<template>
  <div id="bzt" style="height: 100%; width: 100%; position: absolute; top: 0; left: 0;"></div>
</template>

<script>
import {getRys} from "@/api/kjry/kjry";
import * as echarts from "echarts";

export default {
name: "rys",
  created() {
    this.getRy()
  },
  methods: {
    getRy() {
      //查询人员分类的人数
      getRys().then(res => {
        this.initBT(res.data)
      })
    },
    //实例化饼状图
    initBT(echartsData) {
      let chartDom = document.getElementById('bzt');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '人员数',
          subtext: '',
          left: 'center'
        },
        rich: {
          newline: {
            lineHeight: 22,
            padding: [0, 0]
          }
        },
        tooltip: {
          confine: true,          // 强制提示框限制在图表区域内
          position: 'right',      // 优先右侧显示（根据实际情况调整）
          trigger: 'item',
          formatter: '人才平台<br>{b} : {c}<br>占比：{d}%'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            data: echartsData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }
        ]
      };
      option && myChart.setOption(option);
    },

  },
}
</script>

<style scoped>

</style>
